<template>
    <div class="bhzs">
      <div class="bhzs_header">
        <div class="bhzs_header_scroll">
          <img
            class="bhzs_header_scroll_logo"
            @click="click_left()"
          />
        </div>
        <div class="bhzs_header_list" id="bhzs_header_list">
          <el-tag
            v-for="(tag, index) in $store.state.bhzs_list"
            :key="index"
            closable
            :type="$store.state.now_show_iframe == index?'success':'info'"
            @click="click_tag(index)"
            @close="click_closetag(index)"
          >
            {{ tag.pat_NAME }}
          </el-tag>
        </div>
        <div class="bhzs_header_scroll">
          <img
            class="bhzs_header_scroll_logo"
            @click="click_right()"
          />
        </div>
      </div>
      <div class="bhzs_list">
        <div
          class="bhzs_list_item"
          v-show="$store.state.now_show_iframe == index"
          v-for="(item, index) in $store.state.bhzs_list"
          :key="index"
        >
          <iframe class="bhzs_list_item_iframe" :src="item.url"></iframe>
        </div>
      </div>
    </div>
  </template>
  <script>
  export default {
    name: "BHZS",
    props: ["mes"],
    data() {
      return {};
    },
    methods: {
      //点击左侧
      click_left() {
        var nowLeft = document.getElementById("bhzs_header_list").scrollLeft;
        document.getElementById("bhzs_header_list").scrollLeft = nowLeft - 150;
      },
      //点击右侧
      click_right() {
        var nowLeft = document.getElementById("bhzs_header_list").scrollLeft;
        document.getElementById("bhzs_header_list").scrollLeft = nowLeft + 150;
      },
      //点击了标签
      click_tag(index) {
        this.$store.commit("setNowShowIframe", index);
      },
      //点击了关闭标签
      click_closetag(index) {
        this.$store.state.bhzs_list.splice(index, 1);
        this.$store.commit("setNowShowIframe", this.$store.state.now_show_iframe-1);
        if(this.$store.state.now_show_iframe==-1){
           this.$store.commit("setEidtBhzsDrawer", false);
        }
      },
    },
  };
  </script>
  <style scoped>
  .bhzs {
    width: 100%;
    height: 100%;
    font-size: 14px;
  }
  .bhzs_header {
    height: 40px;
    width: 100%;
    background: #f5f7f9;
    white-space: nowrap;
    overflow-y: hidden;
    font-size: 0px;
  }
  .bhzs_list {
    width: 100%;
    /*Firefox*/
    height: -moz-calc(100% - 40px);
    /*chrome safari*/
    height: -webkit-calc(100% - 40px);
    /*Standard */
    height: calc(100% - 45px);
    background: #ffffff;
  }
  .bhzs_header_scroll {
    display: inline-block;
    vertical-align: top;
    width: 40px;
    height: 40px;
    background: #ffffff;
    cursor: pointer;
  }
  .bhzs_header_scroll_logo {
    width: 30px;
    margin-top: 5px;
    margin-left: 5px;
  }
  .bhzs_header_list {
    display: inline-block;
    vertical-align: top;
    width: -moz-calc(100% - 80px);
    /*chrome safari*/
    width: -webkit-calc(100% - 80px);
    /*Standard */
    width: calc(100% - 80px);
    height: 40px;
    overflow-y: hidden;
    box-sizing: border-box;
    padding-top: 8px;
  }
  .bhzs_list_item {
    width: 100%;
    height: 100%;
  }
  .bhzs_list_item_iframe {
    width: 100%;
    height: 100%;
  }
  .el-tag--small {
    margin-left: 15px;
    cursor: pointer;
  }
  </style>
  
  
  // WEBPACK FOOTER //
  // src/components/home/BHZS.vue